<template>
    <view>
		<uni-nav-bar height="60px" rightWidth="200rpx" shadow fixed left-icon="settings-filled" @clickLeft="showDrawer">
			<block slot="right">
				<view class="nav_right">
					<uni-icons type="loop" size="25" color="#909399" @click="goIndex"></uni-icons>
					<view class="user">
						<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<img src="../static/fengjing.jpg" v-if="avatflag==0" alt="">
							<img :src="userInfo.avatarUrl" v-else alt="">
						</button>
					</view>
				</view>
			</block>
		</uni-nav-bar>
		<uni-drawer ref="showRight" mode="left" :mask-click="true">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view @click="goIndex" class="sidemenuitem">
					<text>首页</text>
				</view>
				<template v-for="(item, index) in menuData">
					<view :key="index" v-if="item.status == '1'" @click="changeMenu(item, index)" class="sidemenuitem" :class="[current == index ? 'itemActive' : '']">
						<text>{{item.name}}</text>
					</view>
				</template>
			</scroll-view>
		</uni-drawer>
    </view>
</template>

<script>
	import menuJson from '../static/data/menu.json'
    export default {
		data () {
			return {
				userInfo: {},
				current: 0,
				menuData: [],
				avatflag:uni.getStorageSync('avatflag')
			}
		},
		created () {
			if (!uni.getStorageSync('mobile')) {
				uni.redirectTo({
				  url: '/pages/login/index'
				})
			} else {
				this.getMenuData()
			}
			if (!uni.getStorageSync('profile')) {
				this.getLogin()
			} else {
				this.userInfo = uni.getStorageSync('profile')
			}
		},
        methods: {
			getMenuData () {
				this.$request('mobile/getUserMenuList', 'post', {yhsj: uni.getStorageSync('mobile')}).then(res => {
					let data = menuJson
					data.forEach(item => {
						for (let key in res.data) {
							if (item.code == key) {
								item.status = res.data[key]
							}
						}
					})
					this.menuData = data
					this.current = uni.getStorageSync('current')
				})
			},
			getLogin () {
				let that = this
				console.log(that)
				uni.login({
					"provider": "weixin",
					"onlyAuthorize": true, // 微信登录仅请求授权认证
					success: function(event){
						const {code} = event
						console.log(event)
						that.getUserInfo()
						//客户端成功获取授权临时票据（code）,向业务服务器发起登录请求。
						that.$request('mobile/wxXcxLoginInfo', 'post', {code: event.code}).then(res => {
							
						})

					},
					fail: function (err) {
				        // 登录授权失败
				        // err.code是错误码
				    }
				})
			},
			getUserInfo () {
				let that = this
				uni.getUserInfo({
				  provider: 'weixin',
				  success: function (infoRes) {
					  console.log('222', infoRes.userInfo);
					  that.userInfo = infoRes.userInfo
					  uni.setStorageSync('profile', that.userInfo)
					  that.$parent.userInfo = that.userInfo
				  }
				});
			},
			changeMenu (item, index) {
				this.current = index
				uni.setStorageSync('current', index)
				this.$refs.showRight.close();
				uni.navigateTo({
				    url: item.url
				});
			},
			onChooseAvatar (e) {
				this.userInfo.avatarUrl = e.detail.avatarUrl
				this.$parent.userInfo = this.userInfo
				console.log(this.userInfo)
				uni.setStorageSync('profile', this.userInfo)
				uni.setStorageSync('avatflag', 1)
				this.avatflag = 1
				this.$emit('changeAvat',this.avatflag)
			},
            showDrawer() {
                this.$refs.showRight.open();
            },
            closeDrawer() {
                this.$refs.showRight.close();
            },
            goIndex() {              
                //在起始页面跳转到about.vue页面并传递参数
                uni.reLaunch({
                    url: '/pages/index/index'
                });
            }

        }
    }
</script>

<style lang="scss">
	.nav_right {
		display: flex; align-items: center;
	}
	.user {
		.avatar {
			background: transparent; border: none; border-radius: 100%; display: flex; text-align: center;
		}
		img {
			width: 80rpx; height: 80rpx; border-radius: 100%;
		}
	}
	.sidemenuitem {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 45rpx;
		font-size: 14px;
		color: #303133;
		border-bottom: 1rpx solid #eaeefb;
	}
	.itemActive {
		color: #409eff;
		background-color: #ecf5ff;
	}
</style>